<template>
  <div class="change_button">
    <i class="el-icon-refresh"></i>
    <span class="text">换一换</span>
  </div>
</template>

<script>
  export default {
    name: "ChangeButton"
  }
</script>

<style scoped lang="less">
  .change_button{
    border: 1px solid #999;
    background-color: #fff;
    height: 22px;
    line-height: 22px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 11px;
    i{
      transition: all 0.4s;
    }
    .text{
      padding-left: 2px;
    }
    &:hover{
      background-color: #ddd;
      cursor: pointer;
      .el-icon-refresh{
        transform: rotate(-180deg);
      }
    }
  }
</style>